<template>
  <div class="goodslistWrap">
    <view class="topBar">
      <view class="search" @click="goSearch">
          <uni-icons
        type="search"
        size="14"
      />
    <text>{{form.goodsName}}</text>     
      </view>
    <span class="iconfont" :class="iconClass"    @click="changeColumn">
    
    </span>
    </view>
    <view class="sortWrap">
    <view :class="{active:form.sortType==='all'}" @click="sortList('all')">综合</view>
    <view :class="{active:form.sortType==='sales'}" @click="sortList('sales')">销量</view>
    <view class="priceSort" :class="{active:form.sortType==='price'}" @click="sortList('price')">价格&nbsp;&nbsp;&nbsp;&nbsp;
      <span class="top" :class="{active:form.sortType==='price'&&form.sortPrice===0}">&gt;</span>
      <span class="bottom" :class="{active:form.sortType==='price'&&form.sortPrice===1}" >&gt;</span> </view>
    </view>
   <GoodsItem :goodsItem = "goodsList" :column='column'></GoodsItem>
  </div>
</template>
  
<script>
import GoodsItem from './components/goodsItem'
export default {
  components: {
   GoodsItem
  },
  data() {
    return {
     currentSort:'all',
      goodsList: [],
        total: 0,
        column:2,
      form: {
        goodsName: "",
        sortType:'all',
        sortPrice:1,
        categoryId:0
      },
    };
    
  },


  async onLoad({search}) {
    this.form.goodsName = search;
    await this.getGoodsList();
  },

 computed: {
  iconClass() {
    return this.column===1? 'icon-weimingmingwenjianjia_gongzuotai':'icon-gongzuotaiweixuanzhong'
  }
 },
  methods: {
    sortList(sortType){
     this.form.sortType=sortType
    if(sortType==='price'){
     if(this.currentSort==='price'){
         if(this.form.sortPrice===0){
         this.form.sortPrice=1
         }else{
        this.form.sortPrice=0
        }
     }else{
        this.form.sortPrice=0
     }
      
    }
     this.currentSort=sortType
     this.getGoodsList()
    },
    changeColumn(){
     if(this.column===1){
      this.column=2
     }else{
      this.column=1
     }
    },
    goSearch(){
   uni.redirectTo({ url:'/subpackg_1/searchPage/index' })
    },
    async getGoodsList() {
      let {
        data: {
          list: { data },
          total,
        },
      } = await this.$request.get("/goods/list",this.form);
      this.goodsList = data;
      this.total = total;
    },
  },
};
</script>

<style lang="scss" scoped>
.topBar{
  width: 100%;
  height: 92rpx;
  padding: 12rpx;
  display: flex;
  padding-right: 20rpx;
  background-color: #f1f1f2;
  justify-content: space-between;
  align-items: center;
  .search{
  width: 650rpx;
  background-color: #fff;
  border-radius: 46rpx;
  line-height:78rpx ;
  text-align: center;
  vertical-align: middle;
  font-size: 28rpx;
 text{
  margin-left: 10rpx;
 }
  }
  .iconfont{
   font-size: 40rpx;
  }
}
.sortWrap{
  height: 92rpx;
  padding: 10rpx;
  display: flex;
  justify-content: space-around;
  align-content: center;
  text-align: center;
  line-height: 92rpx;
  border-bottom: 1px solid #f1f1f2;
  .priceSort{
    position: relative;
    span{
      position: absolute;
      font-size: 30rpx;
      font-family: "宋体";
      font-weight: 700;
         right: 60rpx;
        color:rgb(0, 0, 0) ;
    }
     .top{
     
        top: -10rpx;
      transform: rotateZ(-90deg);
     }
     .bottom{
      top: 10rpx;
        transform: rotateZ(90deg);
     }
     .active{
    color: #e49a3d;
  }
  }
  
}
.active{
    color: #e49a3d;
  }
</style>